<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBackList"
      class="topTitles"
    ></topTitle>
    <div class="spacing"></div>
    <div class="mainCon">
      <el-row :gutter="10" class="topBox">
        <el-col :span="18" style="padding-left: 0px; height: 100%">
          <div class="leftTBox">
            <div class="companyName">
              <span class="companyTit ellipsis">{{
                projectScore.projectName
              }}</span>
              <span
                :class="[
                  startStatus,
                  {
                    greenBack: projectScore.status === 'STARTED',
                    StartOver: projectScore.status === 'COMPLETED',
                    startStop: projectScore.status === 'STOPPED',
                    noStart: projectScore.status === 'NOT_STARTED',
                  },
                ]"
                >{{ projectScore.statusDesc }}</span
              >
            </div>
            <div class="rating">
              <p>
                <span class="score">
                  <span>{{
                    projectScore.score == null ? '--' : projectScore.score
                  }}</span
                  >分 / 评级：<span>{{
                    projectScore.gradeLevel
                      ? projectScore.gradeLevel === 'O'
                        ? '其他'
                        : projectScore.gradeLevel
                      : '--'
                  }}</span>
                </span>
                <span class="time fS color999">
                  <span>评价更新时间：</span>
                  <span>{{ projectScore.scoreUpdateTime || '--' }}</span>
                </span>
              </p>
            </div>
          </div>
          <div class="leftBBox">
            <div>
              项目存在
              <span style="color: #e02020">{{ detailData.totalCount }}</span>
              项扣分
            </div>
            <div class="noDeduction" v-if="negetivePoints.length < 1">
              <img src="../../../static/img/noData.png" alt />
              <div class="text fS color999">暂无扣分项</div>
            </div>
            <!-- 扣分项 -->
            <div v-if="negetivePoints.length > 0">
              <div
                class="deduction"
                v-for="(item, i) in negetivePoints"
                :key="i"
              >
                <p class="dedTitle fS color333">
                  <span>{{ item.name }}</span
                  >( <span>根据项目数据</span>，存在
                  <span>{{ item.count }}</span
                  >项扣分)
                </p>
                <div>
                  <ul>
                    <li
                      class="mrT12"
                      v-for="(itemChild, j) in item.projectIndexs"
                      :key="j"
                    >
                      <div
                        class="clearfix"
                        @click="goRepair(i, j, itemChild.id)"
                        style="position: relative"
                      >
                        <i
                          class="icon iconfont iconzhankai"
                          style="
                            color: #e02020;
                            font-size: 12px;
                            position: absolute;
                            top: 8px;
                          "
                          v-if="isShowDetail !== i + '/' + j"
                        ></i>
                        <i
                          class="icon iconfont iconshouqi"
                          style="
                            color: #e02020;
                            font-size: 12px;
                            position: absolute;
                            top: 8px;
                          "
                          v-if="isShowDetail === i + '/' + j"
                        ></i>
                        <span
                          class="dedCon fS color333 ellipsis"
                          style="width: 60%; margin-left: 15px"
                          :title="
                            itemChild.reason
                              ? itemChild.reason.indexOf('2、扣分明细') > -1
                                ? itemChild.reason
                                    .split('2、扣分明细')[0]
                                    .split('扣分原因：')[1]
                                : itemChild.reason.indexOf('扣分原因：') > -1
                                ? itemChild.reason.split('扣分原因：')[1]
                                : itemChild.reason
                              : '--'
                          "
                          >{{
                            itemChild.reason
                              ? itemChild.reason.indexOf('2、扣分明细') > -1
                                ? itemChild.reason
                                    .split('2、扣分明细')[0]
                                    .split('扣分原因：')[1]
                                : itemChild.reason.indexOf('扣分原因：') > -1
                                ? itemChild.reason.split('扣分原因：')[1]
                                : itemChild.reason
                              : '--'
                          }}</span
                        >
                        <el-button
                          size="small"
                          class="funBut fr"
                          v-if="isShowDetail !== i + '/' + j"
                          >修复</el-button
                        >
                        <el-button
                          size="small"
                          class="funBut fr"
                          v-if="isShowDetail === i + '/' + j"
                          >{{ isOpenText }}</el-button
                        >
                        <span
                          class="dedCon fr fS color333"
                          v-if="!itemChild.gradeLevel"
                          >-{{ itemChild.score }}分</span
                        >
                        <span
                          class="dedCon fr fS color333"
                          v-if="itemChild.gradeLevel"
                          >定级{{
                            itemChild.gradeLevel
                              ? itemChild.gradeLevel === 'O'
                                ? '其他'
                                : itemChild.gradeLevel
                              : '--'
                          }}</span
                        >
                      </div>
                      <el-collapse-transition>
                        <div
                          class="rankDetail"
                          v-if="isShowDetail === i + '/' + j"
                        >
                          <div>
                            <div class="clearfix">
                              <p class="conTitle color333 fl">
                                {{ specificData.indexName }}
                              </p>
                              <p
                                class="fr pointsLevel"
                                v-if="specificData.gradeLevel"
                              >
                                定级{{
                                  specificData.gradeLevel
                                    ? specificData.gradeLevel === 'O'
                                      ? '其他'
                                      : specificData.gradeLevel
                                    : '--'
                                }}
                              </p>
                              <p
                                class="fr pointsLevel"
                                v-if="!specificData.gradeLevel"
                              >
                                -{{ specificData.score }}分
                              </p>
                            </div>
                            <p class="labelWidth clearfix">
                              <span class="fS color666 fl">扣分原因：</span>
                              <span class="fS color666 fl w80">
                                {{
                                  specificData.reason
                                    ? specificData.reason.indexOf(
                                        '2、扣分明细'
                                      ) > -1
                                      ? specificData.reason
                                          .split('2、扣分明细')[0]
                                          .split('扣分原因：')[1]
                                      : specificData.reason.indexOf(
                                          '扣分原因：'
                                        ) > -1
                                      ? specificData.reason.split(
                                          '扣分原因：'
                                        )[1]
                                      : specificData.reason
                                    : '--'
                                }}
                                <span
                                  v-if="
                                    specificData.reason &&
                                    specificData.reason.indexOf('2、扣分明细') >
                                      -1
                                  "
                                  @click="showScoreDetail(itemChild.id)"
                                  class="reduceDetail"
                                  >扣分明细</span
                                >
                              </span>
                            </p>
                            <p class="labelWidth clearfix">
                              <span class="fS color666 fl">责任主体：</span>
                              <span class="fS color666 fl w80">
                                <span
                                  class="type fontBorderTheme fontColorTheme"
                                  >{{ specificData.typeDesc }}</span
                                >
                                {{ specificData.companyName }}
                              </span>
                            </p>
                            <p class="labelWidth clearfix">
                              <span class="fS color666 fl">评价标准：</span>
                              <span class="fS color666 fl w80">{{
                                specificData.evaluateStandard
                              }}</span>
                            </p>
                            <p class="labelWidth clearfix">
                              <span class="fS color666 fl">参考条例：</span>
                              <span class="fS color666 fl w80">{{
                                specificData.referenceRules
                              }}</span>
                            </p>
                          </div>
                          <div class="way">
                            <p class="fS repair">如何修复</p>
                            <!-- <p  class = "labelWidth clearfix"><span class = "fS color666 fl">修复平台：</span><span class = "fS fl w80" style = "color:#409EFF;">我是扣分原因</span></p>
                                                        <p  class = "labelWidth clearfix"><span class = "fS color666 fl">修复方式：</span><span class = "fS color666 fl w80">我是扣分原因</span></p>-->
                            <div
                              v-html="specificData.repairTips"
                              class="howRepair"
                            ></div>
                          </div>
                        </div>
                      </el-collapse-transition>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="padding-right: 0; height: 100%">
          <div class="rightTBox">
            <p class="fS color666">
              {{ detailData.cityName || '--' }}在建项目排名
            </p>
            <p class="ranking color333">
              <i v-if="isScore" class="iconfont iconpaiming"></i>
              <span>{{ detailData.rank }}</span
              >/<span>{{ detailData.total }}</span>
            </p>
          </div>
          <div class="rightBBox">
            <p class="basicSituation color333">基本情况</p>
            <p class="labelWidth clearfix">
              <span class="fS color333 fl">建档日期：</span>
              <span class="fS fr color333">{{
                detailData.projectCreateTime || '-- '
              }}</span>
            </p>
            <p class="labelWidth clearfix">
              <span class="fS color333 fl">开工日期：</span>
              <span class="fS fr color333">{{
                detailData.startDate || '-- '
              }}</span>
            </p>
            <p class="labelWidth clearfix">
              <span class="fS color333 fl">建设周期：</span>
              <span class="fS fr color333"
                >{{
                  detailData.cycle == null ? '-- ' : detailData.cycle
                }}天</span
              >
            </p>
            <p class="labelWidth clearfix">
              <span class="fS color333 fl">实名制总人数：</span>
              <span class="fS fr color333"
                >{{ detailData.realNameTotal || 0 }}人</span
              >
            </p>
            <p class="labelWidth clearfix">
              <span class="fS color333 fl">考勤人次：</span>
              <span class="fS fr color333"
                >{{ detailData.attTotal || 0 }}人次</span
              >
            </p>
            <p class="labelWidth clearfix">
              <span class="fS color333 fl">保证金总缴存：</span>
              <span class="fS fr color333">{{
                detailData.depositAccount || '--'
              }}</span>
            </p>
            <p class="labelWidth clearfix">
              <span class="fS color333 fl">工资专户：</span>
              <span class="fS fr color333" style="color: #5fab2c">{{
                detailData.salaryAccount || '--'
              }}</span>
            </p>
            <p class="labelWidth clearfix">
              <span class="fS color333 fl">代发工资总额：</span>
              <span class="fS fr color333"
                >{{ detailData.salaryTotal || 0 }}万元</span
              >
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <ReduceDialog
      :scoreDetailVisible="scoreDetailVisible"
      :reduceScoreDetail="reduceScoreDetail"
      @closeDialog="closeDialog"
    ></ReduceDialog>
  </div>
</template>

<script>
import topTitle from '@/components/publicCom/topTitle'
import ReduceDialog from './ReduceDialog'
export default {
  name: 'projectScoreDetail',
  components: {
    topTitle,
    ReduceDialog,
  },
  data() {
    return {
      scoreDetailVisible: false, //扣分明细弹窗
      reduceScoreDetail: {
        type: '',
        detailId: '',
        reduceScoreDetailInfo: [],
      },
      isScore: true,
      page: '',
      titleText: '项目评价详情',
      startStatus: 'startStatus', //状态样式
      isShowDetail: '',
      isOpenText: '', //扣分
      isShowBonusPoints: '', //加分
      isOpenBonusPoints: '', //加分
      detailData: {},
      projectScore: {},
      negetivePoints: [],
      specificData: '', //具体详情
      projectId: '',
      projectScoreId: '',
      back: true,
      fromPath: '',
    }
  },
  beforeRouteEnter(to, from, next) {
    if (
      from.path == '/home/enterpriseScore/projectScoreList' ||
      '/home/networkGrid/dataSharingSettings'
    ) {
      next()
    } else {
      next((vm) => {
        // 从其它页面过来默认选中项目评价
        vm.$store.commit(
          'set_active_index',
          '/home/enterpriseScore/projectScoreList'
        )
        vm.$store.state.activeMenu = '/home/enterpriseScore/projectScoreList'
        vm.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/enterpriseScore/projectScoreList',
          newUrl: vm.$router.currentRoute.fullPath,
        })
      })
    }
  },
  created() {
    this.projectId = this.$route.query.projectId
    this.page = this.$route.query.page
    this.projectScoreId = this.$route.query.projectScoreId
    this.getScoreData()
  },
  methods: {
    // 扣分明细弹窗
    showScoreDetail(detailId) {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditDeductionDetail/expand/getCreditDedDetail',
        data: {
          detailId,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            const results = response.data.result
            this.reduceScoreDetail.type = results.type
            if (results.type == '1') {
              this.handleData(results, 'names')
            } else if (results.type == '2') {
              this.handleData(results, 'recordTimes')
            } else {
              this.handleData(results, 'timeAndName')
            }
            this.scoreDetailVisible = true
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 处理明细数据
    handleData(results, detailName) {
      if (
        this.specificData.reason &&
        this.specificData.reason.indexOf('扣分明细：') > -1
      ) {
        let reduceStr = this.specificData.reason.split('扣分明细：')[1]
        if (reduceStr.indexOf('b') > -1) {
          // 存在未代发或补发或两条明细（A为补发）
          let reduceReason = this.specificData.reason
            .split('扣分明细：')[0]
            .split('扣分原因：')[1]
          let detailInfo = {}
          if (reduceReason.split('/')[0].indexOf('存在0') === -1) {
            detailInfo.title = reduceStr.split('b')[0].split('a')[1]
            let notIssued = null
            notIssued = results[detailName].filter((v) => {
              if (v.indexOf('A') === -1) {
                return v
              }
            })
            detailInfo.detail = notIssued
            this.reduceScoreDetail.reduceScoreDetailInfo.push(
              JSON.parse(JSON.stringify(detailInfo))
            )
          }
          if (reduceReason.split('/')[1].indexOf('存在0') === -1) {
            detailInfo = {}
            detailInfo.title = reduceStr.split('b')[1]
            let reissue = []
            results[detailName].forEach((v) => {
              if (v.indexOf('A') > -1) {
                reissue.push(v.split('A')[1])
              }
            })
            detailInfo.detail = reissue
            this.reduceScoreDetail.reduceScoreDetailInfo.push(
              JSON.parse(JSON.stringify(detailInfo))
            )
          }
        } else {
          this.reduceScoreDetail.reduceScoreDetailInfo[0] = {}
          this.reduceScoreDetail.reduceScoreDetailInfo[0].title = reduceStr
          if (detailName === 'timeAndName') {
            let detailArr = []
            let detailNameArr = Object.keys(results[detailName])
            for (let i = 0; i < detailNameArr.length; i++) {
              detailArr[i] = {}
              detailArr[i].month = detailNameArr[i]
              detailArr[i].name = JSON.parse(
                JSON.stringify(results[detailName][detailNameArr[i]])
              )
            }
            this.reduceScoreDetail.reduceScoreDetailInfo[0].detail = JSON.parse(
              JSON.stringify(detailArr)
            )
          } else {
            this.reduceScoreDetail.reduceScoreDetailInfo[0].detail = JSON.parse(
              JSON.stringify(results[detailName])
            )
          }
        }
      }
    },
    closeDialog() {
      this.scoreDetailVisible = false
      this.reduceScoreDetail.reduceScoreDetailInfo = []
    },
    goBackList() {
      if (this.page == 'dataSharingSettings') {
        this.$router.push({
          path: '/home/networkGrid/dataSharingSettings',
          name: 'dataSharingSettings',
          query: {
            tab: 'projectEvaluation',
          },
        })
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/networkGrid/dataSharingSettings',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push('/home/enterpriseScore/projectScoreList')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/enterpriseScore/projectScoreList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // 扣分点击显示详情
    async goRepair(index, j, id) {
      this.reduceScoreDetail.detailId = id
      if (this.isShowDetail === index + '/' + j) {
        this.isShowDetail = -1 //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
      } else {
        await this.getDetailData(id)
        this.isShowDetail = index + '/' + j //这里是把index赋值给isShow，isShow=index则显示
        this.isOpenText = '收起'
        this.isShowBonusPoints = -1
      }
    },
    getScoreData() {
      this.axios({
        method: 'post',
        url: 'api-ps/creditProjScorDetail/expand/findProjectScoreDetail',
        data: {
          projectId: this.projectId,
          projectScoreId: this.projectScoreId,
        },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            if (resp.data.result) {
              this.detailData = resp.data.result
              this.negetivePoints = this.detailData.indexDimList
              this.projectScore = this.detailData.projectScore || {}
            }
          } else {
            this.$message({
              type: 'error',
              message: resp.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '数据获取失败',
          })
        })
    },
    getDetailData(id) {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditProjScorDetail/expand/findProjectScoreDetailById',
        data: { id },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.specificData = resp.data.result
          } else {
            this.$message({
              type: 'error',
              message: resp.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
/* .mainCon {
    top: 213px;
} */
.containerRouterViewWrap {
  background: none;
}
.mainCon {
  // margin-top: 10px;
  height: calc(100% - 50px);
  top: 208px;
  background: #f5f7fa;
  left: 24px;
  right: 24px;
  padding: 0;
  /* 开工状态 */
  .startStatus {
    // padding: 2px 8px;
    color: #fff;
    font-size: 12px;
    margin-left: 4px !important;
    vertical-align: top;
    display: inline-block;
    margin-top: 8px;
  }
  .greenBack {
    background: #009588;
  }
  .StartOver {
    background: #657282;
  }
  .noStart {
    background: #ffc100;
  }
  .startStop {
    background: #d9544f;
  }
  .topBox {
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* padding:25px;
      background: #fff; */
    /* 左边盒子样式 */
    .leftTBox {
      padding: 20px 25px;
      background: #fff;
      height: 115px;
      .companyName {
        color: #333333;
        font-size: 24px;
        line-height: 36px;
        height: 36px;
        .companyTit {
          display: inline-block;
          max-width: 600px;
        }
      }
      .rating {
        margin-top: 7px;
        .score {
          font-size: 24px;
          color: #333333;
        }
        .time {
          margin-left: 24px;
        }
      }
    }
    .leftBBox {
      height: calc(100% - 125px);
      background: #fff;
      padding: 24px;
      margin-top: 10px;
      /deep/.el-divider__text.is-left {
        left: 0;
      }
      /* /deep/.el-divider--horizontal {
        margin:0 0 ;
      } */
      /deep/ .el-divider__text {
        padding: 0;
        padding-right: 12px;
        font-size: 16px;
        color: #333333;
      }
      .deduction {
        margin-top: 12px;
        > div {
          padding-left: 96px;
        }
        .dedTitle {
          margin-bottom: 6px;
        }
        .funBut {
          color: #009588;
          border-color: #009588;
          background: #fff;
          width: 96px;
          margin-left: 60px;
        }
        .dedCon {
          display: inline-block;
          margin-top: 5px;
        }
        .rankDetail {
          margin-top: 12px;
          background: #f5f7fa;
          padding: 22px 24px;
          .conTitle {
            font-size: 16px;
            margin-bottom: 20px;
          }
          .way {
            margin-top: 8px;
            /deep/.howRepair {
              /* font-size: 14px;
                  color: #666666; */
              /* p { */
              /* font-size: 14px;
                  color: #666666; */
              /* } */
              span {
                font-size: 14px !important;
                color: #666666 !important;
                font-family: 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif' !important;
              }
            }
          }
          .pointsLevel {
            color: #e02020;
          }
          .type {
            font-size: 12px;
            border: 1px solid #009588;
            padding: 0 2px;
            color: #009588;
            border-radius: 2px;
          }
        }
      }
      .noDeduction {
        text-align: center;
        margin-top: 48px;
        img {
          width: 160px;
          margin-bottom: 15px;
        }
      }
    }
    .explainBox {
      padding: 24px;
      background: #fff;
      margin-top: 10px;
      font-size: 14px;
      color: #999999;
    }
    .rightTBox {
      height: 115px;
      background: #fff;
      text-align: center;
      padding-top: 28px;
      margin-bottom: 10px;
      .ranking {
        font-size: 28px;
        margin-top: 10px;
      }
    }
    .rightBBox {
      // height: calc(100% - 125px);
      background: #fff;
      padding: 16px 27px;
      /* margin-top: 10px; */
      .basicSituation {
        font-size: 16px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #d5dee7;
      }
    }
  }
  .mrT12 {
    margin-top: 12px;
  }
  .labelWidth {
    margin-bottom: 8px;
    font-size: 14px;
    color: #717171;
  }
  .fS {
    font-size: 14px;
  }
  .w80 {
    width: 80%;
  }
  .repair {
    font-size: 14px;
    color: #3a3a3a;
    font-weight: 550;
    margin-bottom: 8px;
  }
}
.iconpaiming {
  font-size: 34px;
  background-image: linear-gradient(to bottom, #fd9d00 0%, #fa6400 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reduceDetail {
  color: rgb(64, 158, 255);
  margin-left: 10px;
  text-decoration: underline;
  cursor: pointer;
}
.topTitles .noExplain h2 {
  &::after {
    background-color: #fff !important;
  }
}
</style>
